<template>
  <div>
    <a-space direction="vertical" :size="12" fill>
      <a-grid :cols="12" :col-gap="14" :row-gap="14">
        <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 6, xxl: 6 }">
          <ProjectDataShow />
        </a-grid-item> 
        <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 6, xxl: 6 }">
          <DeviceDataShow />
        </a-grid-item>
        <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 6, xxl: 6 }">
          <BaseDataShow />
        </a-grid-item>
        <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 6, xxl: 6 }">
          <UserDataShow />
        </a-grid-item>
      </a-grid>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import BaseDataShow from './components/BaseDataShow.vue'
import DeviceDataShow from './components/DeviceDataShow.vue'
import ProjectDataShow from './components/ProjectDataShow.vue'
import UserDataShow from './components/UserDataShow.vue'

defineOptions({ name: 'TaskAnalysis' })
</script>

<style scoped lang="scss"></style>
